import React, { useRef, createRef } from 'react'

// 需求：获取 DOM
export default function App() {
  // #1. 创建 ref 引用，inputRef.current 表示初始的 null
  // useRef 每次都会返回相同的引用，而 createRef 每次渲染都会返回一个新的引用
  const inputRef = useRef(null)
  // const inputRef = createRef()
  const handleClick = () => {
    // #3. inputRef.current => DOM
    console.log(inputRef.current.value)
  }
  return (
    <div>
      {/* #2. 用 inputRef 和 DOM 的 ref 属性进行绑定 */}
      <input ref={inputRef} type='text' />
      <button onClick={handleClick}>获取内容</button>
    </div>
  )
}
